<template>
  <Row>
    <Col span="12">
    <Card :bordered="true" :dis-hover="false" :padding="8">
      <!--表格-->
      <p slot="title" style="height:38px;">
        <Button-group>
          <!--<Button type="ghost" size="large" icon="plus-round"></Button>-->
          <Button type="ghost" size="large" icon="edit" @click="updateForce">修改</Button>
          <Button type="ghost" size="large" icon="trash-b" @click="deleteForce">删除</Button>
        </Button-group>
        <Input v-model="forceQuery.text" @on-enter="searchText" placeholder="查询..." style="max-width: 600px;float: right;">
        <Button slot="append" icon="ios-search" @click="searchText"></Button>
        </Input>
      </p>
      <!--表格-->
      <Table @on-selection-change="selectTable" border :columns="table_show" :data="table_data"></Table>
      <!--分页-->
      <div style="margin: 10px;overflow: hidden">
        <div style="float: right;">
          <Page :current="forceQuery.page" @on-change='changePage' :total="forceQuery.total" simple></Page>
        </div>
      </div>
    </Card>
    </Col>
    <Col span="12">
    <Card :bordered="true" :dis-hover="false" :padding="8">
      <h3 slot="title" style="height:38px;">{{doing}}</h3>
      <!--表单-->
      <Form ref="forceForm" :model="forceForm" :label-width="60" :rules="forceValidate" label-position="right">
        <Form-item label="编号">
          <Input v-model="forceForm.id" placeholder="添加为空" disabled></Input>
        </Form-item>
        <Form-item label="名称" prop="forceName">
          <Input v-model="forceForm.forceName" placeholder="请输入" required @on-enter="forceSubmit('forceForm')"></Input>
        </Form-item>
        <Form-item label="操作">
          <Button type="success" shape="circle" @click="forceSubmit('forceForm')" icon="plus">保存</Button>
          <Button type="primary" shape="circle" @click="forceReset('forceForm')" icon="arrow-return-left">重置</Button>
        </Form-item>
      </Form>
    </Card>
    </Col>
  </Row>
</template>

<script>
  import forceApi from '@/api/forceApi'

  export default {
    data() {
      return {
        doing: '添加权限',
        table_show: [{
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {
            title: '编号',
            width: 80,
            key: 'id',
            align: 'center'
          },
          {
            title: '权限名称',
            key: 'force_name'
          }
        ],
        table_data: [],
        on_select: [],
        forceQuery: {
          text: '',
          page: 1,
          size: 10,
          total: 0
        },
        forceValidate: {
          id: [{
            required: false
          }],
          forceName: [{
            required: true,
            message: '权限名不能为空',
            trigger: 'blur'
          }]
        },
        forceForm: {
          id: '',
          forceName: ''
        }
      }
    },
    methods: {
      updateForce() {
        var vm = this
        if (vm.on_select.length != 1) {
          this.$Message.error('请选择1项进行操作！')
          return
        }
        vm.forceForm.id = vm.on_select[0].id;
        vm.forceForm.forceName = vm.on_select[0].force_name;
        vm.doing = '修改权限';
      },
      selectTable(selection) {
        this.on_select = selection
      },
      changePage(index) {
        this.forceQuery.page = index
        this.findForce()
      },
      searchText() {
        this.findForce()
      },
      findForce() {
        var vm = this
        this.$Loading.finish()
        forceApi.findForce(this.forceQuery).then((data) => {
          vm.table_data = data.list
          vm.forceQuery.total = data.totalRow
          this.$Loading.finish()
        }).catch((errMsg) => {
          this.$Loading.error()
          
        })
      },
      forceSubmit(name) {
        var vm = this
        this.$refs[name].validate((valid) => {
          if (valid) {
            this.$Modal.confirm({
              title: '系统提示',
              content: '<p>确认保存这条<br> ' +
                '编号:<font style="color:red">' + (this.forceForm.id ? this.forceForm.id : '暂无') + '</font> <br>' +
                '名称:<font style="color:red">' + this.forceForm.forceName + '</font></p>',
              onOk: () => {
                var msg = this.$Message.loading({
                  content: '正在保存中...',
                  duration: 0
                })
                forceApi.saveForce(this.forceForm).then((data) => {
                  vm.findForce()
                  vm.$refs[name].resetFields()
                  vm.doing = '添加权限'
                  vm.forceForm.id = ''
                  vm.$Message.destroy()
                }).catch((errMsg) => {
                  this.$Message.destroy()
                  
                })
              },
              onCancel: () => {}
            });
          }
          else {
            this.$Message.error('表单验证失败!');
          }
        })
      },
      forceReset(name) {
        this.$refs[name].resetFields();
        this.forceForm.id = ''
        this.doing = '添加权限'
      },
      getForce() {
        forceApi.getForce(9).then((data) => {
          console.log(data)
        }).catch((errMsg) => {
          
        })
      },
      deleteForce() {
        var vm = this
        if (vm.on_select.length < 1) {
          this.$Message.error('至少选择1项进行操作！')
          return
        }
        var ids = []
        for (var i = 0; i < vm.on_select.length; i++) {
          ids.push(vm.on_select[i].id)
        }
        this.$Modal.confirm({
          title: '系统提示',
          content: '<p>确认删除<br> ' +
            '编号为<font style="color:red">' + (ids.join(',')) + '</font>的元素么',
          onOk: () => {
            var msg = this.$Message.loading({
              content: '正在删除中...',
              duration: 0
            })
            forceApi.deleteForce(ids.join(',')).then((data) => {
              vm.findForce()
              vm.$refs[name].resetFields()
              vm.forceForm.id = ''
              vm.doing = '添加权限'
              this.$Message.destroy()
            }).catch((errMsg) => {
              this.$Message.destroy()
            })
          },
          onCancel: () => {}
        });
      }
    },
    mounted() {
      this.findForce()
    },
    watch: {}
  }
</script>

<style>

</style>